<template>
  <div v-if="form.carInsuranceSource ==1">
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="insuranceMessage" label-width="140px" :rules="type =='detail'?{}:rules" :label-position="type =='detail'?'right':'top'">
        <div class="card-title-wrap">
          <span>保险信息</span>
          <span></span>
        </div>
        <div style="box-sizing: border-box;padding-left: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="交强险公司名称:" prop="compulsoryCompanyName" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.compulsoryCompanyName" maxlength="30" clearable></el-input>
                <span v-if="type=='detail'">{{form.compulsoryCompanyName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交强险保费:" prop="compulsoryMoney" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.compulsoryMoney" maxlength="10" @change="changeAmount('compulsoryMoney')"></el-input>
                <span v-if="type=='detail'">{{ format_thousand(form.compulsoryMoney)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交强险保单号:" prop="compulsoryPolicyNo" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.compulsoryPolicyNo" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.compulsoryPolicyNo}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="交强险起保日:" prop="strongStartTime">
                <el-date-picker v-if="type !=='detail'" v-model="form.strongStartTime" type="date" placeholder="选择日期" :style="{width: type=='detail'?'70%':'80%'}" />
                <span v-if="type=='detail'">{{form.strongStartTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交强险到期日:" prop="strongEndTime">
                <el-date-picker v-if="type !=='detail'" v-model="form.strongEndTime" type="date" placeholder="选择日期" :style="{width: type=='detail'?'70%':'80%'}" />
                <span v-if="type=='detail'">{{form.strongEndTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交强险被保险人:" prop="strongAssured" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.strongAssured" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.strongAssured}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="交强险性质:" prop="strongNature" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.strongNature" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.strongNature}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车船税是否缴纳:" prop="carShipPayFlag">
                <el-select v-if="type !=='detail'" v-model="form.carShipPayFlag" clearable :style="{width: type=='detail'?'70%':'80%'}">
                  <template v-for="dict in dict.type.business_yes_no">
                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                  </template>
                </el-select>
                <dict-tag v-if="type =='detail'" :options="dict.type.business_yes_no" :value="form.carShipPayFlag" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车船费用:" prop="carShipMoney" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.carShipMoney" maxlength="10" @change="changeAmount('carShipMoney')"></el-input>
                <span v-if="type=='detail'">{{format_thousand(form.carShipMoney)}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="商业险公司名称:" prop="businessCompanyName" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.businessCompanyName" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.businessCompanyName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商业险保费:" prop="businessPremium" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.businessPremium" maxlength="10" @change="changeAmount('businessPremium')" />
                <span v-if="type=='detail'">{{format_thousand(form.businessPremium)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商业险保单号:" prop="businessPolicyNo" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.businessPolicyNo" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.businessPolicyNo}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="商业险起保日:" prop="businessStartTime">
                <el-date-picker v-if="type !=='detail'" v-model="form.businessStartTime" type="date" placeholder="选择日期" :style="{width: type=='detail'?'70%':'80%'}" />
                <span v-if="type=='detail'">{{form.businessStartTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商业险到期日:" prop="businessEndTime">
                <el-date-picker v-if="type !=='detail'" v-model="form.businessEndTime" type="date" placeholder="选择日期" :style="{width: type=='detail'?'70%':'80%'}" />
                <span v-if="type=='detail'">{{form.businessEndTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商业险被保险人:" prop="businessAssured" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.businessAssured" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.businessAssured}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="商业险性质:" prop="businessNature" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.businessNature" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.businessNature}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他保险名称:" prop="otherInsureName" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.otherInsureName" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.otherInsureName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他保险保费:" prop="otherInsureMoney" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.otherInsureMoney" maxlength="10" @change="changeAmount('otherInsureMoney')"></el-input>
                <span v-if="type=='detail'">{{format_thousand(form.otherInsureMoney)}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="交强险保单:" prop="strongFileId" style="width: 100%;">
                <ImageCommon :up-type="2" info="选择附件" :disabled="type=='detail'" :limit="20" v-model="form.strongFileId"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商业险保单:" prop="businessFileId" style="width: 100%;">
                <ImageCommon :up-type="2" info="选择附件" :disabled="type=='detail'" :limit="20" v-model="form.businessFileId"></ImageCommon>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
    <script>
export default {
  name: "insuranceMessage",
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  dicts: ["business_yes_no"],
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      rules: {
        compulsoryCompanyName: [
          { required: true, message: "请输入交强险公司名称", trigger: "blur" },
        ],
        compulsoryMoney: [
          { required: true, message: "请输入交强险保费", trigger: "blur" },
        ],
        compulsoryPolicyNo: [
          { required: true, message: "请输入交强险保单号", trigger: "blur" },
        ],
        strongStartTime: [
          { required: true, message: "请选择交强险起保日", trigger: "change" },
        ],
        strongEndTime: [
          { required: true, message: "请选择交强险到期日", trigger: "change" },
        ],
        strongAssured: [
          { required: true, message: "请输入交强险被保险人", trigger: "blur" },
        ],
        strongNature: [
          { required: true, message: "请输入交强险性质", trigger: "blur" },
        ],
        carShipPayFlag: [
          { required: true, message: "请选择车船税是否缴纳", trigger: "change" },
        ],
        carShipMoney: [
          { required: true, message: "请输入车船费用", trigger: "blur" },
        ],
        businessCompanyName: [
          { required: true, message: "请输入商业险公司名称", trigger: "blur" },
        ],
        businessPremium: [
          { required: true, message: "请输入商业险保费", trigger: "blur" },
        ],
        businessPolicyNo: [
          { required: true, message: "请输入商业险保单号", trigger: "blur" },
        ],
        businessStartTime: [
          { required: true, message: "请选择商业险起保日", trigger: "change" },
        ],
        businessEndTime: [
          { required: true, message: "请选择商业险到期日", trigger: "change" },
        ],
        businessAssured: [
          { required: true, message: "请输入商业险被保险人", trigger: "blur" },
        ],
        businessNature: [
          { required: true, message: "请输入商业险性质", trigger: "blur" },
        ],
        otherInsureName: [
          { required: true, message: "请输入其他保险名称", trigger: "blur" },
        ],
        otherInsureMoney: [
          { required: true, message: "请输入其他保险保费", trigger: "blur" },
        ],
      },
    };
  },
  //   mounted() {
  //     //日期区间回显
  //     this.$set(this.form, 'businessTime', [this.form.businessStartTime ? this.form.businessStartTime : '', this.form.businessEndTime ? this.form.businessEndTime : '',])
  //     this.$set(this.form, 'strongTime', [this.form.strongStartTime ? this.form.strongStartTime : '', this.form.strongEndTime ? this.form.strongEndTime : '',])
  //   },
  methods: {
    changeAmount(str) {
      console.log(str, '--==-', this.form[str]);
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (!msg?.test(this.form[str])) {
        this.form[str] = "";
      } else {
        this.form[str] = this.form[str]
          .toString()
          .match(/^\d+(?:\.\d{0,2})?/)[0];
      }
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3281fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
